<template>
    <el-card class="account-card_item">
        <img class="country" :src="country_src" />
        <div class="money-item">
            <div class="key">帳戶金額</div>
            <div class="money">¥{{ accountInfo.account_balance }}</div>
        </div>
        <div class="money-item">
            <div class="key">凍結金額</div>
            <div class="money red">¥{{ accountInfo.freeze_balance }}</div>
        </div>
        <div class="money-item">
            <div class="key">風險保證金</div>
            <div class="money">¥{{ accountInfo.risk_insurance }}</div>
        </div>
        <div class="money-item">
            <div class="key">可用餘額</div>
            <div class="money green">¥{{ accountInfo.available_balance }}</div>
        </div>
    </el-card>
</template>
<script setup>
import CHINA_IMG from "@/assets/image/china.png";
import USA_IMG from "@/assets/image/usa.png";
import EUP_IMG from "@/assets/image/eng.png";
import { computed } from "vue";

const props = defineProps({
    accountInfo: {
        type: Object,
        default: () => ({
            country: 'china',
            account_balance: 1000000,
            freeze_balance: 1000000,
            risk_insurance: 1000000,
            available_balance: 1000000
        })
    }
});
const COUNTRY_MAP_IMAGE = {
    china: CHINA_IMG,
    usa: USA_IMG,
    eup: EUP_IMG,
}

const country_src = computed(() => {
    return COUNTRY_MAP_IMAGE[props.accountInfo.country]
});

</script>
<style scoped>
.account-card_item {
    width: 443px;
    height: 371px;
    font-size: 20px;
    font-weight: bold;
}

.account-card_item>>>.el-card__body {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 58px 70px 70px;
    grid-template-areas:
        "country country"
        "a b"
        "c d";
    padding-top: 31px;
    padding-left: 37px;
    row-gap: 50px;
}

.red {
    color: #FF6D62;
}

.green {
    color: #127C70;
}

.country {
    width: 58px;
    height: 58px;
    grid-area: country;
}

.money-item {
    line-height: 40px;
}
.money-item:nth-child(2) {
    grid-area: a;
}

.money-item:nth-child(3) {
    grid-area: b;
}

.money-item:nth-child(4) {
    grid-area: c;
}

.money-item:nth-child(5) {
    grid-area: d;
}
</style>